<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../layui/plugins/selectInput.css">
</head>
<body>
<style>
    .layui-table th{text-align:center;}
    .layui-table td{text-align:center;}
</style>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <label class="layui-form-label">单号</label>
            <div class="layui-input-block">
                <input type="text" value="" name="product.model" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">账期</label>
            <div class="layui-input-block">
                <input type="number" value="" name="product.model" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">交货日期</label>
            <div class="layui-input-block">
                <input type="text" value="" name="product.model" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">供应商</label>
            <div class="layui-input-block">
                <select name="" lay-search="">
                    <option value="">请选择</option>
                    <option value="1">个</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <label class="layui-form-label">调入仓库</label>
            <div class="layui-input-block">
                <select name="" lay-search="">
                    <option value="">请选择</option>
                    <option value="1">个</option>
                </select>
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">是否开发票</label>
            <div class="layui-input-block">
                <select name="" lay-search="">
                    <option value="">请选择</option>
                    <option value="1">个</option>
                </select>
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label xrequired">联系人</label>
            <div class="layui-input-block">
                <input type="text" value="" lay-verify="required"  name="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" value="" name="" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <label class="layui-form-label">收货地址</label>
            <div class="layui-input-block">
                <input type="text" value="" name="" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">付款方式</label>
            <div class="layui-input-block">
                <select name="" lay-search="">
                    <option value="">请选择</option>
                    <option value="1">个</option>
                </select>
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label xrequired">备注</label>
            <div class="layui-input-block">
                <input type="text" value="" lay-verify="required"  name="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label xrequired">预计到货</label>
            <div class="layui-input-block">
                <input type="text" value="" lay-verify="required"  name="" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <button type="button" class="layui-btn layui-btn-normal">上传采购合同</button>
        </div>
        <div class="layui-col-xs3">
            <button type="button" class="layui-btn layui-btn-normal">上传采购发票</button>
        </div>
        <div class="layui-col-xs3">
            <button type="button" class="layui-btn layui-btn-normal">审核</button>
        </div>
    </div>
    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="150">
                <col width="150">
                <col width="150">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>图片</th>
                <th>SKU</th>
                <th>单位</th>
                <th>数量</th>
                <th>单价</th>
                <th>总价</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>图片</td>
                <td><input type="text"class="layui-input sku" name="sku[]"></td>
                <td class="product-unit">件</td>
                <td><input class="layui-input qty"  type="number" name="qty[]" value="1"/></td>
                <td><input class="layui-input price" type="number" name="price[]"/></td>
                <td class="sum-one-price"></td>
                <td><input class="layui-input" type="text" name="remark[]"/></td>
            </tr>
            <tr>
                <td>图片</td>
                <td id="test1"></td>
                <td class="product-unit">件</td>
                <td><input class="layui-input qty"  type="number" name="qty[]" value="1"/></td>
                <td><input class="layui-input price" type="number" name="price[]"/></td>
                <td class="sum-one-price"></td>
                <td><input class="layui-input" type="text" name="remark[]"/></td>
            </tr>
            <tr>
                <td>合计：</td>
                <td></td>
                <td></td>
                <td class="total-qty"></td>
                <td></td>
                <td class="total-price"></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="layui-form">
        <div class="layui-col-xs10">
            <div class="layui-layout-right">
                <button type="button" class="layui-btn ">重置</button>
                <button type="button" class="layui-btn layui-btn-normal">保存</button>
            </div>
        </div>
    </div>
</form>
<script src="../layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.config({ base: '/test/layui/plugins' }).extend({
        selectInput: '/selectInput'
    }).use(['layer', 'form', 'table', 'jquery', 'selectInput'], function()
    {
        var layer = layui.layer
            ,form = layui.form
            , table = layui.table
            , $ = layui.jquery
            , selectInput = layui.selectInput;
        var ins2 = selectInput.render({
            elem: '#test1',
            data: [
                {value: 1111, name: 1111},
                {value: 2333, name: 2222},
                {value: 2333, name: 2333},
                {value: 2333, name: 2333},
            ],
            placeholder: '请输入名称',
            name: 'list_common',
            remoteSearch: false
        });

        /*var ins = selectInput.render({
            // 容器id，必传参数
            elem: '#test1',
            name: 'test', // 渲染的input的name值
            placeholder: '请输入名称', // 渲染的inputplaceholder值
            // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
            data: [
                {value: 1111, name: 1111},
                {value: 2333, name: 2222},
                {value: 2333, name: 2333},
                {value: 2333, name: 2333},
            ],
            remoteSearch: false,// 是否启用远程搜索 默认是false，和远程搜索回调保存同步
            // 解析回调，如果你的异步返回的data不是上述的data格式，请在此回调格式成对应的数据格式，回调参数是异步加载的数据
            parseData: function (data) {
                console.log(data);
            },
            error: function (error) { // 异步加载出错的回调 回调参数是错误msg

            },
            done: function (data) { // 异步加载成功后的回调 回调参数加载返回数据
                console.log(data);
            },
            remoteMethod: function (value, cb) { // 远程搜索的回调函数
                // value 是input实施输入的value值
                // cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数

                //案例
                //这里如果val为空, 则不触发搜索
                if (!value) {
                    return cb([]);
                }
                //这里的$.ajax去请求后台拿回数据
                $.ajax({
                    method: 'get',
                    url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
                    data: {
                        keyword: val,
                    },
                    success: function (data) {
                        return cb(data)
                    }
                })
            }
    });*/

        $("input.qty,input.price").change(function()
        {
            calculateTable();
        });

        function calculateTable()
        {
            var sQty = 0, totalPrice = 0;
            $("input.qty").each(function()
            {
                var $this = $(this)
                    , $tr = $this.parent().parent()
                    , qty = +$this.val(),
                    price = +$tr.find(".price").val();
                if(qty < 1)
                {
                    layer.msg("数量不能小于1");
                    return false;
                }
                if(price <= 0)
                {
                    layer.msg("价格必须大于0");
                    return false;
                }
                var onePrice = (qty * price).toFixed(2) * 1;
                sQty += qty;
                totalPrice += onePrice;
                $tr.find(".sum-one-price").text(onePrice);
            });
            $(".total-qty").text(sQty);
            $(".total-price").text(totalPrice.toFixed(2));
        }
    });
</script>
</body>
</html>